<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outs"></i>
				<span slot="center-slot">{{data}}</span>
				<!-- <i class="iconfont icon-jiahao" style="font-size: 25px;padding-left: 15px;"  @click="tapPopup" slot="right-slot" ></i> -->
			</navitop>
		</div>
		
		<div class="detial" >
			<div style="background-color: #f0f0f0;" :style="'margin-top:' + nv_height" ></div>
			<scroll-view class="staff_b" scroll-y="true" touch-action=none; :style='window_height'>
				<div class="profit_icon">
					<v-tabs v-model="current" :scroll="scroll_one" line-height="0" pillsColor="#1296db" activeColor="#fff"
						:pills="true" :tabs="tabs" @change="changeTab"></v-tabs>
				</div>
				<!-- 我的佣金 -->
				<div class="profit_out" v-show="commission">
					<div class='profit_list' v-if="dataSorce">
						<div>
							<text>总佣金：{{dataSorce.totalCommission}}</text>
						</div>
						<div>
							<text>已提现佣金： {{dataSorce.withdrawalCommission}}</text>
						</div>
						<div class="profi">
							银行卡名称： <input v-model="dataSorce.bankName" style="width: 50%;"/><text @click="ka_name(dataSorce.bankName,'bankName')">保存</text>
						</div>
						<div class="profi">
							提现银行卡号： <input v-model="dataSorce.bankAccount" style="width: 50%;" /><text @click="ka_name(dataSorce.bankAccount,'bankAccount')">保存</text>
						</div>
						<div class="profi">
							可提现佣金： <input v-model="dataSorce.totalCommission - dataSorce.withdrawalCommission" style="width: 50%;" disabled="true" /><text @click="al_alert">提现</text>
						</div>
					</div>
					
					<div class="null_title" v-else>
						<div>
							<i class="iconfont icon-empty iconcize"></i>
						</div>
						<div class="null_title_tow">
							没有更多数据
						</div>
					</div>
				</div>
				<!-- 佣金记录 -->
				<div v-show="record" class="profit_out" >
					<div class="profit_record" v-for="(item,index) in dataSorce">
						<div>
							<div><text>订单号：{{item.orderNo}}</text></div>
							<div><text>客户名称：{{item.companyName}}</text></div>
							<div><text>支付金额(元)：{{item.payAmount}}</text></div>
							<div><text>会员等级：{{item.rewardLevel}}</text></div>
							<div><text>佣金奖励比例(%)：{{item.rewardRate}}%</text></div>
							<div><text>佣金收入(元)：{{item.totalIncome}}</text></div>
							<div><text>支付日期：{{item.createDate}}</text></div>
						</div>
					</div>
					
					<div class="null_title" v-if="dataSorce == ''">
						<div>
							<i class="iconfont icon-empty iconcize"></i>
						</div>
						<div class="null_title_tow">
							没有更多数据
						</div>
					</div>
				</div>
				<!-- 提现记录 -->
				<div v-show="Withdrawal" class="profit_out" >
					<div class="profit_record" v-for="(item,index) in dataSorce">
						<div>
							<div><text>提现金额：{{item.amount}}</text></div>
							<div><text>提现银行：{{item.bankName}}</text></div>
							<div><text>银行卡号：{{item.bankAccount}}</text></div>
							<div><text>状态：{{item.status == 0 ? '已提现' : '未提现'}}</text></div>
							<div><text>提现日期：{{item.createDate}}</text></div>
						</div>
					</div>
					
					<div class="null_title" v-if="dataSorce == ''">
						<div>
							<i class="iconfont icon-empty iconcize"></i>
						</div>
						<div class="null_title_tow">
							没有更多数据
						</div>
					</div>
				</div>
			</scroll-view>
		</div>
		<!-- 弹窗组件 -->
		<popus ref="alert">
			<div style="background-color: #fff;height: 200px; width: 250px;">
				<div style="text-align: center; padding-top: 10rpx;">提现</div>
				<div style="margin: 30px 0 30px 0;">
					<input v-model="t_moli" placeholder="请输入金额" type="number" style="border: 1px solid #cacaca; width: 80%;margin: auto;"/>
				</div>
				<div style="background-color: #1890FF;color: #fff;height: 90rpx;line-height: 90rpx;width: 80%;margin: auto;" @click="alert_tx">
					<div style="text-align: center;">提现</div>
				</div> 
			</div>
		</popus>

	</view>
</template>

<script>
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import navtxt from '@/pages/common/index/detial/detialtxt.vue'
	import navitop from '@/components/common/navi-top'
	import {getCommissionRecord,getWithdrawalRecord,getUserInfo,save,withdrawalCommission} from '@/common/api/my/myapi.js'
	export default {
		components:{
			navitop,
			popus,
			navtxt
		},
		props:{
			data: {
				default: ''
			}
		},
		data(){
			return {
				window_height:'',
				alertWidth: '',
				tabs: ['我的佣金', '佣金记录','提现记录','银行卡'],
				current: 0,
				scroll_one: false,  //设置tabs选项是否平铺 
				dataSorce: '',
				commission: false, 	// 我的佣金
				record:false,		// 佣金记录
				Withdrawal: false,	// 提现
				uid: '',		// 用户id
				t_moli: ''			,// 提现
				nv_height: '',	// 导航顶部高度
			}
		},
		mounted() {
			
			let _this = this;
			uni.getSystemInfo({
			    success: function (res) {
					_this.alertWidth = 'width:' + res.windowWidth + 'px;'
			    }
			});
		   const res = uni.getSystemInfoSync();
		   this.window_height = 'height:' + res.windowHeight + 'px;';
		   
		   this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
		   
		   this.http_list(0)
		   this.commission = true;
		   this.uid = uni.getStorageSync('userInfo').userId;
		   
		   
		},
		methods:{
			outs(){
				this.$emit('colos',1)
			},
			//修改银行卡
			ka_name(val,name){
				uni.showLoading({
					title: '加载中',
				})
				save({id: this.uid,[name]: val}).then((rows)=> {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						})
					}
				})
			},
			
			al_alert(){
				this.$refs.alert.open('center')
			},
			// 提现
			alert_tx(){
				uni.showLoading({
					title: '加载中',
				})
				withdrawalCommission({amount: this.t_moli}).then((rows)=> {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: rows.message
						})
					}
				})
				this.$refs.alert.close();
			},
			changeTab(val){
				if(val == 0){
					this.http_list(val)
					this.record = false ;
					this.Withdrawal = false;
				}
				if(val == 1){
					this.http_list(val)
					this.commission = false;
					this.Withdrawal = false;
				}
				if(val == 2){
					this.http_list(val)
					this.commission = false;
					this.record = false;
				}
			},
			http_list(val){
				if(val == 0){
					uni.showLoading({
						title: '加载中',
					})
					getUserInfo().then((rows) => {
						if(rows.code == 200){
							uni.hideLoading();
							this.commission = true;
							this.dataSorce = rows.data;
						}else{
							uni.hideLoading();
						}
					})
				}
				if(val == 1){
					uni.showLoading({
						title: '加载中',
					})
					getCommissionRecord({current: 1,size: 20}).then((rows) => {
						if(rows.code == 200){
							uni.hideLoading();
							this.record = true ;
							this.dataSorce = rows.data.records;
							for(let i in this.dataSorce){
								this.dataSorce[i]['createDate'] = this.dataSorce[i].createDate.substr(0,11)
							}
						}
					})
				}
				if(val == 2){
					uni.showLoading({
						title: '加载中',
					})
					getWithdrawalRecord({current: 1,size: 20,companyName: '',realName: ''}).then((rows) => {
						if(rows.code == 200){
							uni.hideLoading();	
							this.Withdrawal = true;
							this.dataSorce = rows.data.records;
							for(let i in this.dataSorce){
								this.dataSorce[i]['createDate'] = this.dataSorce[i].createDate.substr(0,11)
							}
						}
					})
				}
			}
		}
	}
	
</script>

<style scoped lang="scss">
.detial {
	background-color: #fff;
}
.profit_icon {
	padding: 20rpx 0 0 0;
}
.profit_out {
	width: 100%;
	height: 100%;
	background-color: #fff;
	.profit_list {
		width: 95%;
		padding: 0 0 0 30rpx;
		div {
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
		}
		
	}
	.profit_record {
		width: 95%;
		margin: auto;
		padding: 20rpx 0 0 30rpx;
		border-bottom: 1px solid #cacaca;
		div {
			div {
				height: 50rpx;
			}
		}
	}
}

.profi {
	text {
		height: 70rpx;
		line-height: 70rpx;
		position: absolute;
		right: 5%;
		border: 1px solid #cacaca;
		padding: 0 20rpx 0 20rpx;
		text-align: center;
		border-radius: 4px;
		font-size: 14px;
		color: #7b7878;
	}
}
		

</style>
